import React, { useState, useEffect } from "react";
import { Card, Row, Col, Statistic, List, Tag, Typography, Space } from "antd";
import {
  TeamOutlined,
  BookOutlined,
  MessageOutlined,
  BellOutlined,
  ClockCircleOutlined,
  FileTextOutlined,
} from "@ant-design/icons";
import styled from "styled-components";
import type { Activity, Announcement } from "../../../types/admin";

const { Text } = Typography;

const StyledCard = styled(Card)`
  margin-bottom: 24px;
  .ant-card-head-title {
    font-weight: bold;
  }
`;

const AdminHome: React.FC = () => {
  const [activities, setActivities] = useState<Activity[]>([
    {
      id: "1",
      type: "course",
      title: "新课程已创建",
      content: "教师张三创建了新课程《高级Web开发》",
      createTime: "2024-03-15 10:30",
      user: {
        id: "t1",
        name: "张三",
        role: "teacher",
      },
    },
    {
      id: "2",
      type: "exam",
      title: "考试已发布",
      content: "《数据结构》期中考试已发布",
      createTime: "2024-03-14 15:20",
      user: {
        id: "t2",
        name: "李四",
        role: "teacher",
      },
    },
  ]);

  const [announcements, setAnnouncements] = useState<Announcement[]>([
    {
      id: "1",
      title: "系统维护通知",
      content: "系统将于本周日凌晨2点进行例行维护，预计持续2小时",
      createTime: "2024-03-15",
      priority: "high",
      status: "active",
    },
    {
      id: "2",
      title: "新功能发布通知",
      content: "系统新增AI助教功能，欢迎师生使用体验",
      createTime: "2024-03-14",
      priority: "medium",
      status: "active",
    },
  ]);

  const getActivityIcon = (type: Activity["type"]) => {
    switch (type) {
      case "course":
        return <BookOutlined />;
      case "exam":
        return <FileTextOutlined />;
      case "discussion":
        return <MessageOutlined />;
      case "system":
        return <BellOutlined />;
      default:
        return <ClockCircleOutlined />;
    }
  };

  const getPriorityColor = (priority: Announcement["priority"]) => {
    switch (priority) {
      case "high":
        return "red";
      case "medium":
        return "orange";
      case "low":
        return "blue";
      default:
        return "blue";
    }
  };

  return (
    <div style={{ padding: "24px" }}>
      <Row gutter={24}>
        <Col span={6}>
          <StyledCard>
            <Statistic title="总教师数" value={42} prefix={<TeamOutlined />} />
          </StyledCard>
        </Col>
        <Col span={6}>
          <StyledCard>
            <Statistic
              title="总学生数"
              value={1256}
              prefix={<TeamOutlined />}
            />
          </StyledCard>
        </Col>
        <Col span={6}>
          <StyledCard>
            <Statistic title="课程总数" value={86} prefix={<BookOutlined />} />
          </StyledCard>
        </Col>
        <Col span={6}>
          <StyledCard>
            <Statistic
              title="讨论总数"
              value={328}
              prefix={<MessageOutlined />}
            />
          </StyledCard>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={12}>
          <StyledCard title="最近活动">
            <List
              itemLayout="horizontal"
              dataSource={activities}
              renderItem={(activity) => (
                <List.Item>
                  <List.Item.Meta
                    avatar={getActivityIcon(activity.type)}
                    title={
                      <Space>
                        {activity.title}
                        <Tag color="blue">{activity.type}</Tag>
                      </Space>
                    }
                    description={
                      <>
                        <div>{activity.content}</div>
                        <Text type="secondary">
                          <ClockCircleOutlined /> {activity.createTime}
                          {activity.user && (
                            <Tag color="cyan" style={{ marginLeft: 8 }}>
                              {activity.user.name}
                            </Tag>
                          )}
                        </Text>
                      </>
                    }
                  />
                </List.Item>
              )}
            />
          </StyledCard>
        </Col>
        <Col span={12}>
          <StyledCard title="系统公告">
            <List
              itemLayout="horizontal"
              dataSource={announcements}
              renderItem={(announcement) => (
                <List.Item>
                  <List.Item.Meta
                    avatar={<BellOutlined />}
                    title={
                      <Space>
                        {announcement.title}
                        <Tag color={getPriorityColor(announcement.priority)}>
                          {announcement.priority}
                        </Tag>
                      </Space>
                    }
                    description={
                      <>
                        <div>{announcement.content}</div>
                        <Text type="secondary">
                          <ClockCircleOutlined /> {announcement.createTime}
                        </Text>
                      </>
                    }
                  />
                </List.Item>
              )}
            />
          </StyledCard>
        </Col>
      </Row>
    </div>
  );
};

export default AdminHome;
